<template>
	<view>
		<view class="service-content">
			<view class="content-top">
				<image src="@/static/img/sign-top-bg.png" class="top-bg"></image>
				<view class="flex-box sign-box">
					<view class="box-1">
						<view class="">
							待使用
						</view>
						<view class="num-box">
							<text class="top-num">{{baseData.wait_use}}</text>张
						</view>
					</view>
					<view class="box-1">
						<view class="">
							已使用
						</view>
						<view class="num-box">
							<text class="top-num">{{baseData.have_been_use}}</text>张
						</view>
					</view>
				</view>
			</view>
			<view class="list-box">
				<view class="list-title">
					购销记录
				</view>
				<view class="flex-box record-title">
					<view class="box-1 text-left">
						时间
					</view>
					<view class="box-1">
						数量
					</view>
					<view class="box-1">
						单张面值
					</view>
					<view class="box-1">
						状态
					</view>
				</view>
				<mescroll-body :height="heightView+'px'" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="list" v-if="dataList.length">
						<view class="li" v-for="(item,index) in dataList" :class="current!=0?'init':''" :key="index">
							<view class="li flex-box">
								<view class="box-1 text-left">
									{{item.add_date}}
								</view>
								<view class="box-1 num">
									{{item.num || 0}}张
								</view>
								<view class="box-1">
									￥{{item.price || 0}}/张
								</view>
								<view class="box-1">
									<text class="btn" v-if="item.status == 1" @tap="releaseGoods(item.id)">放货</text>
									<text v-else>{{item.status_text}}</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<u-empty mode="data" marginTop="100" text="暂无购销记录"></u-empty>
					</view>
				</mescroll-body>
			</view>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {apiGoods} from "@/api/mock.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				devaluate:{},
				value:5,
				showCond:false,
				comm_img_url:'',
				dataList:[],
				current:0,
				page:1,
				status:0,
				pageSize:10,
				baseData:{ 
					wait_use: 0,
					have_been_use: 0,
				},
				heightView:0
			};
		},
		onLoad(option) {
			this.comm_img_url = this.$c.appImg
			this.current = option.type
			this.getBaseData()
		},
		
		mounted(){
			let winHeight = 0
			uni.getSystemInfo({
				success: (res) => {
					winHeight = res.windowHeight
				}
			});
			const query = uni.createSelectorQuery().in(this);
			query.select('.record-title').boundingClientRect(data => {
				this.heightView = parseFloat(winHeight) - parseFloat(data.top) - parseFloat(data.height) - 30
			}).exec();
		},
		methods:{
			tabsChange(item) {
				this.current = item.index;
				this.page = 1
				this.upCallback(this.page,this.current)
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
			  this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page,status) {
			  //联网加载数据
			  let _this = this
			  this.$u.api.activePunchMy({page:page.num,status:this.current}).then(res=>{
			  	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			  	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			  
			  	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			  	//this.mescroll.endByPage(res.list.length, totalPage); //必传参数(当前页的数据个数, 总页数)
			  
			  	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			  	this.mescroll.endBySize(this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总数据量)
			  
			  	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			  	//this.mescroll.endSuccess(res.list.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
			  
			  	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			  	// this.mescroll.endSuccess(res.list.length);
			  	//设置列表数据
				if(page.num == 1){_this.dataList = [];} //如果是第一页需手动制空列表
				_this.dataList =  _this.dataList.concat(res.msg.list); //如果是第一页需手动制空列表
			  	// this.dataList = res.msg.list; //追加新数据
			  }).catch(()=>{
			  	//联网失败, 结束加载
			  	this.mescroll.endErr();
			  })
			},
			//获取我的优惠券
			getMyCoupon()
			{
				this,$u.api.couponMy()
				.then(res=>{
					//todo 根据接口绑定数据
					this.dataList=res.data
				})
			},
			//获取基础数据
			getBaseData()
			{
				uni.showLoading({
					title:"加载中……"
				})
				this.$u.api.checkInBaseData()
				.then(res=>{
					uni.hideLoading()
					if(res.code ==200){
						this.baseData= {...res.data}
					}
				})
				.catch(err=>{
					uni.hideLoading()
				})
			},
			//放货
			releaseGoods(id)
			{
				uni.showModal({
					title:"温馨提醒",
					content:"您确认要放货吗？",
					confirmColor:"#D02227",
					success:(obj)=>{
						if(obj.confirm){
							this.$u.api.releaseGoods({id:id})
							.then(res=>{
								if(res.code==200){
									this.$u.toast(res.msg)
									setTimeout(()=>{
										this.downCallback()
									},1500)
									return
								}
								this.$u.toast(res.msg)
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
@import 'Services.scss';
</style>
